<template>
  <div id="app">
    <el-row style="text-align: center;">
      <el-col>
        <img style="width: 50px; height: 50px; vertical-align: middle;" :src="img" alt="Logo">
        <span
          style="display: inline-block; height: 50px; line-height: 50px; vertical-align: middle; margin-left: 10px;font-size: 28px;font-weight: bold;">
          黑龙江昊华化工有限公司
        </span>
      </el-col>
    </el-row>
    <el-row>
      <el-card>
        <el-tabs tab-position="left" style="height: 100%;" type="card">
          <el-tab-pane label="公司简介">
            <p style="text-indent: 2em;line-height: 150%;">&nbsp;&nbsp;黑龙江昊华化工有限公司（简称黑龙江昊华，英文Heilongjiang Haohua
              Chemical
              Co.,Ltd）成立于2008年12月。公司前身是齐化集团有限公司，齐化集团有限公司始建于1948年，是黑龙江省唯一集氯碱化工、石油化工和精细化工于一体的国有综合性大型企业，2005年9月29日与中国化工集团有限公司签约进行资产重组，现隶属于中国中化控股有限责任公司氯碱事业部管理。企业位于齐齐哈尔市昂昂溪区榆树屯镇红星村，地处哈大齐工业走廊昂昂溪化工园区内，现有员工人数1200余人。
            </p>
            <p style="text-indent: 2em;line-height: 150%;">
              &nbsp;&nbsp;黑龙江昊华主要生产装置为离子膜烧碱装置、聚氯乙烯装置及配套公用工程。主要产品有烧碱、聚氯乙烯、盐酸、次氯酸钠和液氯等。产品广泛应用于石油开采、粮食深加工、造纸、制药及型材板材等行业。
            </p>
            <p style="text-indent: 2em;line-height: 150%;">
              &nbsp;&nbsp;展望未来，公司将秉承中国中化“科学至上”理念，聚焦主责主线，牢记使命责任，守好安全环保底线红线，努力开创公司改革发展新局面，为全力打造世界一流综合性化工企业，推动化工行业转型升级贡献黑龙江昊华力量。
            </p>
          </el-tab-pane>
          <el-tab-pane label="发展理念">
            <div class="concept-container"
              style="height: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, #4A90E2, #9013FE); border-radius: 10px; position: relative; overflow: hidden;">
              <!-- 动态背景效果 -->
              <div class="floating-circles"></div>

              <!-- 文字部分 -->
              <div class="concept-content" style="color: #fff; text-align: center; font-size: 24px; z-index: 1;">
                <p class="concept-text" style="margin: 0; animation: fadeInUp 2s;">
                  秉承 <span style="font-weight: bold;">科学至上</span> 理念
                </p>
                <p class="concept-text" style="margin: 0; animation: fadeInUp 2.5s;">
                  守好 <span style="font-weight: bold;">安全环保底线红线</span>
                </p>
                <p class="concept-text" style="margin: 0; animation: fadeInUp 3s;">
                  聚焦 <span style="font-weight: bold;">主责主业</span>
                </p>
                <p class="concept-text" style="margin: 0; animation: fadeInUp 3.5s;">
                  努力开创 <span style="font-weight: bold;">改革发展新局面</span>
                </p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="主要产品">
            <div style="text-align: center;">
              <el-carousel :interval="4000" type="card" height="400px">
                <el-carousel-item v-for="(product, index) in products" :key="index">
                  <img style="height: 100%; width: 600px;" :src="product.image" :alt="product.name" class="product-image" />
                  <!-- <h3 style="margin-top: 200px;color: red;">{{ product.name }}</h3> -->
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-tab-pane>
          <el-tab-pane label="产品用途">
            <el-row>
              <el-col :span="1.5">
                <el-button size="mini" @click="change(1)">离子膜烧碱</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button size="mini" @click="change(2)">液氯</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button size="mini" @click="change(3)">盐酸</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button size="mini" @click="change(4)">聚氯乙烯树脂</el-button>
              </el-col>
            </el-row>

            <el-card v-if="title === '离子膜烧碱'">
              <div slot="header" style="text-align: center;">{{ title }}</div>
              <div id="Content">
                <p class="indent">烧碱：</p>

                <p class="indent">浓度：31%、45%</p>

                <p class="indent">执行标准：工业用氢氧化钠GB 209-2006&nbsp; 高纯氢氧化钠GBT11199-2006</p>

                <p class="indent">性质：化学名称为氢氧化钠，本品为略带粘稠液体，具有强氧化性，能与酸、卤素物质起化学反应。</p>

                <p class="indent">工艺：离子膜法。离子膜烧碱装置采用的模极距自然循环电解槽在国内同行业中是领先的，该技术的应用在烧碱消耗上和国内同行业比每吨节省约100度电。</p>

                <p class="indent">用途：广泛用于化工、冶金、造纸、石油、纺织品以及日用化工等部门。</p>
              </div>
            </el-card>
            <el-card v-if="title === '液氯'">
              <div slot="header" style="text-align: center;">{{ title }}</div>
              <div id="Content">

                <p class="indent">液氯：</p>

                <p class="indent">执行标准：工业用液氯 GB 5138-2006</p>

                <p class="indent">密度：1.468g/cm3(0℃) ，</p>

                <p class="indent">熔点：-103±5 ℃，</p>

                <p class="indent">沸点：-34.6℃</p>

                <p class="indent">性质：黄绿色液体, 在常压下即汽化成气体，吸入人体能严重中毒，有剧烈刺激作用和腐蚀性。</p>

                <p class="indent">用途：农药、溶剂、塑料、增塑剂、合成橡胶、合成纤维、自来水及游池消毒，纸浆、纤维等物质漂白，炼镁其它稀有金属等。</p>

                <p class="indent">包装：钢瓶充装</p>
              </div>
            </el-card>
            <el-card v-if="title === '盐酸'">
              <div slot="header" style="text-align: center;">{{ title }}</div>
              <div id="Content">

                <p class="indent">盐酸：</p>

                <p class="indent">规格型号：31% HCL</p>

                <p class="indent">执行标准：工业用盐酸GB 320-2006</p>

                <p class="indent">熔点(℃)： -114.8(纯)</p>

                <p class="indent">沸点(℃)： 108.6(20%)</p>

                <p class="indent">相对密度(水=1)： 1.20</p>

                <p class="indent">性质：无色或微黄色易挥发性液体，有刺鼻的气味</p>

                <p class="indent">用途：纺织染色及皮革染色、钢铁、电镀、化学工业制造、合成材料、味精、医药、锆盐等。</p>

                <p class="indent">包装：槽车装运</p>
              </div>
            </el-card>
            <el-card v-if="title === '聚氯乙烯树脂'">
              <div slot="header" style="text-align: center;">{{ title }}</div>
              <div id="Content">
                <p class="indent">聚氯乙烯树脂：</p>

                <p class="indent">规格型号：SG3、SG5、SG7、SG8等</p>

                <p class="indent">执行标准：PVC树脂GB/T 5761-2006</p>

                <p class="indent">SG-3型：用于制作普通的软制品，用于生产人造革、薄膜、电缆、发泡材料等。</p>

                <p class="indent">SG-5型：通用型树脂，用于生产管材、型材、板材等。</p>

                <p class="indent">SG-7型：用于生产硬制品，如板材、片材、透明片等。</p>

                <p class="indent">SG-8型：用于生产硬制品，如板材、片材、管件、发泡板材等。</p>

                <p class="indent">工艺：聚氯乙烯装置采用70m³聚合釜是源自美国古德里奇技术，是目前国内最成熟可靠的；在离心干燥上采用日本巴工业技术，同样是世界领先技术。</p>

                <p class="indent">包装：纸塑复合袋</p>

                <p class="indent">净重：25 kg/袋</p>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Company',
  props: {
    // define props here
  },
  data() {
    return {
      title: '离子膜烧碱',
      productUses: [
        { name: '石油开采', image: process.env.VUE_APP_BASE_API + '/profile/images/p1.jpg' },
        { name: '造纸', image: process.env.VUE_APP_BASE_API + '/profile/images/p1.jpg' },
        { name: '粮食深加工', image: process.env.VUE_APP_BASE_API + '/profile/images/p1.jpg' },
        { name: '制药', image: process.env.VUE_APP_BASE_API + '/profile/images/p1.jpg' },
      ],
      products: [
        { name: '离子膜烧碱', image: process.env.VUE_APP_BASE_API + '/profile/images/pp1.jpg' },
        { name: '液氯', image: process.env.VUE_APP_BASE_API + '/profile/images/pp2.jpg' },
        { name: '盐酸', image: process.env.VUE_APP_BASE_API + '/profile/images/pp3.jpg' },
        { name: '聚氯乙烯树脂', image: process.env.VUE_APP_BASE_API + '/profile/images/pp4.jpg' },
      ],
      img: process.env.VUE_APP_BASE_API + '/profile/images/hlj.ico'
    }
  },
  computed: {
    // computed properties here
  },
  watch: {
    // watch properties here
  },
  methods: {
    change(index) {
      if (index == 1) {
        this.title = '离子膜烧碱'
      } else if (index == 2) {
        this.title = '液氯'
      } else if (index == 3) {
        this.title = '盐酸'
      } else if (index == 4) {
        this.title = '聚氯乙烯树脂'
      }
    }
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
}
</script>
<style scoped>
/* 全局样式 */
#app {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #2c3e50;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-circles {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 20%); */
  background-size: 50px 50px;
  opacity: 0.2;
  animation: moveBackground 20s linear infinite;
}

@keyframes moveBackground {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 100px 100px;
  }
}

.overview-item {
  text-align: center;
}

.overview-item h3 {
  margin-top: 10px;
  font-size: 20px;
}

.overview-item p {
  font-size: 16px;
  color: #666;
}

.usage-image,
.product-image {
  width: 100%;
  height: 100%;
}
</style>